﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i}"/>
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i}"/>
    <link rel="stylesheet" th:href="@{/mall/css/main.css}"/>
</head>
<body class="animsition">
<div class="shop-cart" id="page">
    <div th:replace="@{/include/fore_header}::header"></div>
    <section class="sub-header shop-detail-1">
        <img class="rellax bg-overlay" th:src="@{/mall/images/sub-header/013.jpg}" alt="">
        <div class="overlay-call-to-action"></div>
        <h3 class="heading-style-3">购物车</h3>
    </section>
    <section class="boxed-sm">
        <div class="container">
            <div class="woocommerce">
                <form class="woocommerce-cart-form">
                    <table class="woocommerce-cart-table">
                        <thead>
                        <tr>
                            <th class="product-thumbnail">商品</th>
                            <th class="product-name"></th>
                            <th class="product-quantity">数量</th>
                            <th class="product-price">单价</th>
                            <th class="product-subtotal">总计</th>
                            <th class="product-remove">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="cart,memberStat:${carts}">
                            <td class="product-thumbnail">
                                <img th:src="@{'/upload/img/'+${cart.goods.goodsPicture}}"
                                     style="height: 86px;width: 102px" alt="product-thumbnail">
                            </td>
                            <td class="product-name" data-title="Product">
                                <input class="product-id" type="hidden" th:value="${cart.cartId}">
                                <a class="product-name" href="#" th:text="${cart.goods.goodsName}">Salad</a>
                            </td>
                            <td class="product-quantity" data-title="Quantity">
                                <input class="qty" step="1" min="0" max="" name="product-name" value="1" title="Qty"
                                       size="4" pattern="[0-9]*" inputmode="numeric" type="number"
                                       th:value="${cart.goodsAmount}">
                            </td>
                            <td class="product-price" data-title="Price" th:text="${'￥'+cart.goods.goodsPrice}">$2.26</td>
                            <td class="product-subtotal" data-title="Total" th:text="${'￥'+cart.total}">$2.26</td>
                            <td class="product-remove">
                                <a class="remove"  aria-label="Remove this item">×</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
                <div class="cart_totals">
                    <h3 class="title">合计</h3>
                    <div class="row">
                        <div class="col-md-8">
                            <table class="woocommerce-cart-subtotal">
                                <tbody>
                                <tr>
                                    <th>商品总价</th>
                                    <td id="totalPrice" data-title="Subtotal" th:text="${'￥'+totalPrice}">$6.31</td>
                                </tr>
                                <tr>
                                    <th>应付</th>
                                    <td id="paymoney" data-title="Total" th:text="${'￥'+discountPrice}">$6.31</td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="proceed-to-checkout">
                                <a class="btn btn-brand pill" th:href="@{/cart/listAllInOrder}">结算</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div th:replace="@{/include/fore_footer}::footer"></div>
<script th:src="@{/mall/js/library/jquery.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap.min.js}"></script>
<script th:src="@{/mall/js/function-check-viewport.js}"></script>
<script th:src="@{/mall/js/library/slick.min.js}"></script>
<script th:src="@{/mall/js/library/select2.full.min.js}"></script>
<script th:src="@{/mall/js/library/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/jquery.mmenu.all.min.js}"></script>
<script th:src="@{/mall/js/library/rellax.min.js}"></script>
<script th:src="@{/mall/js/library/isotope.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-notify.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-slider.js}"></script>
<script th:src="@{/mall/js/library/in-view.min.js}"></script>
<script th:src="@{/mall/js/library/countUp.js}"></script>
<script th:src="@{/mall/js/library/animsition.min.js}"></script>
<script th:src="@{/mall/js/global.js}"></script>
<script th:src="@{/mall/js/config-mm-menu.js}"></script>
<script th:src="@{/adminlte/bower_components/layer-v3.1.1/layer/layer.js}"></script>

<script>
    $(function () {
        $(".qty").click(function () {
            var tr = $(this).parents("tr");
            var tds=tr.find("td");
            var id = tds.eq(1).children(".product-id").val();
            var amount=$(this).val();
            var total=tds.eq(4);
            $.ajax({
                type: "POST",
                url: "/cart/modify",
                data: {id: id,amount:amount},
                dataType: "json",
                success: function (msg) {
                    if (msg["ok"]) {
                        total.html('￥'+msg["total"]);
                        $("#totalPrice").html('￥'+msg["totalPrice"]);
                        $("#paymoney").html('￥'+msg["discountPrice"]);
                    }
                }
            });
        });
        $(".remove").click(function () {
            var tr = $(this).parents("tr");
            var tds=tr.find("td");
            var idValue = tds.eq(1).children(".product-id").val();
            var currentName =tds.eq(1).children(".product-name").html();
            layer.confirm('确定删除【 ' + currentName + "】", {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "POST",
                    url: "/cart/delete",
                    data: {id: idValue},
                    dataType: "json",
                    success: function (msg) {
                        if(msg["ok"]){
                            layer.msg("操作成功", {time: 700}, function () {
                                tr.remove();
                                $("#totalPrice").html('￥'+msg["totalPrice"]);
                                $("#paymoney").html('￥'+msg["discountPrice"]);
                            });
                        }else {
                            layer.msg("删除失败");
                        }
                    }
                });
                layer.close(index);
            });
        });
    })
</script>
</body>
</html>

